{% from 'macros/icon.njk' import icon, svg with context %}

<footer class="site-footer" role="contentinfo">
  <nav class="site-footer__primary-nav auto-grid" aria-label="footer navigation">
    <div class="site-footer__primary-nav-content">
      <a href="/" class="site-footer__brand brand">
        {{ svg('../../images/logo.svg', {label: 'web.dev'}) }}
      </a>
      <p class="text-size-0">
        {{ 'i18n.footer.mission' | i18n(locale) }}
      </p>
    </div>
    <div class="site-footer__primary-nav-links auto-grid">
      <div>
        <h3 class="text-size-2 color-mid-text">Contribute</h3>
        <ul class="site-footer__linkbox-list" role="list">
          <li>
            <a href="https://github.com/GoogleChrome/web.dev/issues/new?assignees=&labels=bug&template=bug_report.md&title="
              data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)">
              {{ 'i18n.footer.file_a_bug' | i18n(locale) }}
            </a>
          </li>
          <li>
            <a href="https://github.com/googlechrome/web.dev"
              data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)">
              {{ 'i18n.footer.view_source' | i18n(locale) }}
            </a>
          </li>
        </ul>
      </div>
      <div>
        <h3 class="text-size-2 color-mid-text">{{ 'i18n.footer.related_content' | i18n(locale) }}</h3>
        <ul class="site-footer__linkbox-list" role="list">
            <li>
            <a href="https://developer.chrome.com/"
              data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)">
              {{ 'i18n.footer.developer_chrome_com' | i18n(locale) }}
            </a>
          </li>
          <li>
            <a href="https://blog.chromium.org/"
              data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)">
              {{ 'i18n.footer.chrome_updates' | i18n(locale) }}
            </a>
          </li>
          <li>
            <a href="/tags/case-study/"
              data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)">
              {{ 'i18n.footer.case_studies' | i18n(locale) }}
            </a>
          </li>
          <li>
            <a href="/podcasts/"
              data-category="Podcasts" data-label="Footer Link (index 5)">
              {{ 'i18n.footer.podcasts' | i18n(locale) }}
            </a>
          </li>
          <li>
            <a href="/shows/"
              data-category="Shows" data-label="Footer Link (index 6)">
              {{ 'i18n.footer.shows' | i18n(locale) }}
            </a>
          </li>
        </ul>
      </div>
      <div>
        <h3 class="text-size-2 color-mid-text">{{ 'i18n.footer.connect' | i18n(locale) }}</h3>
        <ul class="site-footer__linkbox-list" role="list">
          <li>
            <a href="https://www.twitter.com/ChromiumDev"
              data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)">
              Twitter
            </a>
          </li>
          <li>
            <a href="https://www.youtube.com/user/ChromeDevelopers"
              data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)">
              YouTube
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <nav class="site-footer__brand-nav repel" aria-label="Google developers">
    <ul class="cluster" role="list">
      <li>
        <a href="https://developers.google.com/" data-category="Site-Wide Custom Events" data-label="Footer Google Developers Link">
          <img loading="lazy" width="185" height="33" class="site-footer__utility-logo" src="/images/lockup-color.png"
            alt="Google Developers" />
        </a>
      </li>
      <li>
        <a href="https://developer.chrome.com/"
          data-category="Site-Wide Custom Events" data-label="Footer Chrome Link">
          Chrome
        </a>
      </li>
      <li>
        <a href="https://firebase.google.com/" data-category="Site-Wide Custom Events"
          data-label="Footer Firebase Link">
          Firebase
        </a>
      </li>
      <li>
        <a href="https://cloud.google.com/" data-category="Site-Wide Custom Events"
          data-label="Footer Google Cloud Platform Link">
          Google Cloud Platform
        </a>
      </li>
      <li>
        <a href="https://developers.google.com/products"
          data-category="Site-Wide Custom Events" data-label="Footer All products Link">
          {{ 'i18n.footer.all_products' | i18n(locale) }}
        </a>
      </li>
    </ul>
    <div class="cluster">
      {% include "partials/standard-theme-toggle.njk" %}
      <web-language-select current="{{ lang }}"></web-language-select>
    </div>
  </nav>
  <nav class="site-footer__misc-links" aria-label="terms and policies">
    <ul class="cluster" role="list">
      <li>
        <a href="https://policies.google.com/" data-category="Site-Wide Custom Events"
          data-label="Footer Terms and Privacy link">
          {{ 'i18n.footer.terms_and_privacy' | i18n(locale) }}
        </a>
      </li>
      <li>
        <a href="/community-guidelines/" data-category="Site-Wide Custom Events"
          data-label="Footer Community Guidelines link">
          {{ 'i18n.footer.community_guidelines' | i18n(locale) }}
        </a>
      </li>
    </ul>
  </nav>
  <p class="gap-top-size-2 text-size-0">
    Except as otherwise noted, the content of this page is licensed
    under the
    <a href="https://creativecommons.org/licenses/by/4.0/">
    Creative Commons Attribution 4.0 License</a>,
    and code samples are licensed under the
    <a href="https://www.apache.org/licenses/LICENSE-2.0">
    Apache 2.0 License</a>. For details, see the
    <a href="https://developers.google.com/terms/site-policies">
    Google Developers Site Policies</a>.
  </p>
</footer>
